<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keywords" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="keywordsSearch">查询</el-button>
				</el-form-item>


			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="employeeInfo.rows" highlight-current-row v-loading="listLoading" style="width: 100%;">

			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="160" sortable>
			</el-table-column>
			<el-table-column prop="url" label="url" width="100">
			</el-table-column>

      <el-table-column prop="parent.name" label="权限父级" min-width="80" sortable>
      </el-table-column>

      <el-table-column prop="desc" label="描述" min-width="80" sortable>
      </el-table-column>


    </el-table>

    <!--工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        :current-page="query.currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="employeeInfo.total">
    </el-pagination>



  </section>
</template>

<script>


	export default {
		data() {
			return {
        img:'../../assets/bg1.jpg',

				listLoading: false,


        query:{
				  pageSize:10,
          currentPage:1,
          keywords:''
        },
        employeeInfo:{
          rows: [],
          total: 0,
        },

			}

		},
		methods: {

      //获取部门数据
      getPermissions(){
        this.$http.post("/permission",this.query)
            .then(result=>{
              result=result.data;
              if(result.success){
                this.employeeInfo=result.object

              }
            })

      },

      //模糊搜索
      keywordsSearch(){
			  this.query.currentPage=1;
			  this.getPermissions();
      },
      handleCurrentChange(val) {
				this.query.currentPage = val;
				this.getPermissions();
			},
      handleSizeChange(val){
        this.query.currentPage=1;
			  this.query.pageSize=val;

        this.getPermissions();
      },
		},
		mounted() {
			this.getPermissions();
		}
	}
</script>

<style scoped>

</style>